<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>货件详情</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="format-detection" content="telephone=no">
		<!-- jQuery-->
		<script type="text/javascript" src="/static/plugins/jquery/jquery-3.6.0.min.js"></script>

		<!-- layui-->
		<link rel="stylesheet" href="/static/plugins/layui/2.7.6/css/layui.css" media="all">
		<script src="/static/plugins/layui/2.7.6/layui.js" charset="utf-8"></script>

		<!-- common -->
		<link rel="stylesheet" href="/static/admin/css/common.css" media="all" />
		<link rel="stylesheet" href="/static/admin/css/mini-ease.css" media="all" />

		<!--样式-->
		<th:block th:include="include/src :: form_base_js_and_css"/>

	</head>

	<body>

	<form class="layui-form">
		<!-- 列表 -->
		<div class="layui-row layui-col-space5" style="width:90%;margin: 0 auto;">

			<div class="layui-col-md12" id="id_panel_left_grid">
				<div class="layui-panel" style="overflow: auto; padding-top: 0.2rem;">
					<div class="mid-content">
						<table class="layui-hide" id="dhtable" lay-filter="ftable"></table>
					</div>
				</div>
			</div>
		</div>

	</form>

	<!--多张图片展示-->
	<script type="text/html" id="productImageDemo">
		{{#  if(d.img == undefined || d.img == '' || d.img == null){ }}
		暂无图片
		{{#  } else { }}
		<img class="margin_0_2 width_30 height_30" title="点击放大" style="cursor: pointer;" height='40' src="{{ d.img}}" onclick="photograph(this)"/>
		{{#  } }}
	</script>

  </body>
</footer>



<script>
	layui.config({
		//自定义layui组件的目录,设定扩展的layui模块的所在目录，一般用于外部模块扩展
		base: '/static/js/layui_extends/'
	}).use(['form', 'element', 'table', 'dropdown', 'util', 'laydate', 'upload', 'YsModal'], function(){
		var table = layui.table;
		var $ = layui.jquery;

		var bid = '[[${bid}]]';
		var shipmentId = '[[${shipmentId}]]';
		var dataList = [];

		//获取列表数据
		$.ajax({
			url : '/api/inter/tccFbaPlan/searchFlowDetail',
			data : {bid:bid,shipmentId:shipmentId},
			type : 'POST',
			async : false,//关闭异步
			success : function(result) {
				if (result.code == '0') {
					dataList = result.data;
				}else{
					layer.msg(result.msg);
				}
			}
		});

		var cols = [
			{title: '商品编码',   width: '120' , field:'commodityCode' ,align:"center" },
			{title: '商品名称',   width: '170' , field:'commodityName' ,align:"center" },
			{title: 'SKU', width: '160' , field:'sku', align:"center" },
			{title: 'ASIN', width: '160' , field:'asin', align:"center"},
			{title: 'FNSKU', width: '160' , field:'fnSku', align:"center" },
			{title: '数量', width: '120' , field:'numPlanDeliver', align:"center" },
			{title: '图片', width: '100' , field:'img', align:"center" , templet: '#productImageDemo'},
		];

		// 初始化表格
		table.render({
			elem: '#dhtable'
			,data: dataList
			, page: false
			, even: false
			, limit: 10000
			, totalRow: []
			, cols: [cols]
			// , height: '400'
			// , width: '1500'
			, done: function (res, curr, count) {
			},success:function(a,b,c){
				console.log(a,b,c)
			}
		});

	});

	// 点击图片变大
	function photograph(t) {
		if(t.src == null||t.src == ''){
			return;
		}
		layer.open({
			type: 1,
			skin: 'layui-layer-rim', //加上边框
			area: ['75%', '85%'], //宽高
			shadeClose: true, //开启遮罩关闭
			end: function (index, layero) {
				return false;
			},
			content: '<div style="text-align:center"><img src="' + t.src + '" /></div>'
		});
	}

</script>
</html>